<template>
    <div class="NavBar">
        <div class="left">
            <div v-if="leftItem.name || leftItem.icon" class="GyButton" @click="leftClick">
                <gy-icon :fontName="leftItem.icon ? leftItem.icon : 'icon-arrow-left'"/>
                <transition name="push-nav">
                   <span v-show="showLeft" style="font-size: 0.28rem;">{{leftItem.name}}</span>
                </transition>
            </div>
        </div>
        <transition name="show">
            <div v-show="showLeft" class="center">{{title}}</div>
        </transition>
        <div class="right" style="color: dodgerblue;">
            <div v-if="rightItem.name || rightItem.icon" class="GyButton" @click="rightClick">
                <gy-icon :fontName="rightItem.icon"/>
                <span :style="`font-size: 0.28rem;color: ${rightItem.color};`">{{rightItem.name}}</span>
            </div>
        </div>
    </div>
</template>

<script lang="ts">
    import {Component, Vue, Watch} from 'vue-property-decorator'
    import GyButton from "./GyButton.vue";
    import GyIcon from "./GyIcon.vue";

    @Component({
        name: 'NavBar',
        components: {GyIcon, GyButton}
    })
    export default class extends Vue {
        private showLeft: boolean = true;
        private get title():string {
            if (this.$route.meta.title) {
                return this.$route.meta.title;
            } else {
                return '';
            }
        }
        private get leftItem(): any {
            let router: any = {};
            if (this.$store.state.navBarInfo.leftItem) {
                router = this.$store.state.navBarInfo.leftItem;
            } else {
                router = {};
            }
            return router;
        }
        private get rightItem(): any {
            let item: any = {};
            if (this.$store.state.navBarInfo.rightItem) {
                item = this.$store.state.navBarInfo.rightItem;
            } else{
                item = {};
            }
            return item;
        }
        private leftClick(): void {
            this.showLeft = false;
            if (this.leftItem.click) {
                this.leftItem.click();
            }
            let __this = this;
            setTimeout(() => {
                __this.showLeft = true
            }, 200)
        }

        private rightClick(): void {
            if (this.rightItem.click) {
                this.rightItem.click();
            }
        }

        private get routeName(): string | undefined {
            return this.$route.name;
        }

        @Watch('routeName')
        private onRouteChange(): void {
            this.showLeft = false;
            let __this = this;
            setTimeout(() => {
                __this.showLeft = true
            }, 300)
        }
    }
</script>

<style scoped lang="less">
    .NavBar {
        position: fixed;
        z-index: 999;
        height: 0.88rem;
        width: 7.5rem;
        top: 0;
        background-color: rgba(255, 255, 255, .99);
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        & .GyButton {
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;
            position: relative;
            border-radius: 0.1rem;
            overflow: hidden;
            padding: 0.2rem;
            font-size: 0.32rem;
            user-select: none;
            & span {
                padding-right: 0.2rem;
            }
            &::after {
                content: "";
                position: absolute;
                left: 0;
                top: 0;
                right: 0;
                bottom: 0;
                z-index: 2;
            }
            &:active::after {
                background-color: rgba(255, 255, 255, .4);
            }
        }
        /*padding: 0 0.1rem;*/
        &::after {
            content: "";
            position: absolute;
            left: 0;
            bottom: 0;
            right: 0;
            height: 1px;
            background-image: linear-gradient(
                180deg,
                transparent 61%,
                rgba(0, 0, 0, .3) 100%
            );
        }
        & .left {
            flex: 2;
            display: flex;
            flex-direction: row;
            justify-content: flex-start;
            align-items: center;
        }
        & .center {
            font-weight: 600;
            flex: 4;
            font-size: 0.32rem;
        }
        & .right {
            flex: 2;
            & .GyButton {
                display: flex;
                flex-direction: row;
                justify-content: flex-end;
                align-items: center;
            }
        }
    }
    .push-nav-enter-active {
        transition: all 0.1s ease;
    }
    .push-nav-leave-active {
        transition: all .1s ease;
    }
    .push-nav-enter {
        transform: translateX(-10px);
        opacity: 0;
    }
    .push-nav-leave-to {
        transform: translateX(10px);
        opacity: 0;
    }
    .show-enter-active {
        transition: all 0.1s ease;
    }
    .show-leave-active {
        transition: all 0.0s ease;
    }
    .show-enter, .show-leave-to {
        /*transform: translateX(-10px);*/
        opacity: 0;
    }
</style>
